<template>
  <view class="container">
    <!-- Material Header -->
    <view class="material-header">
      <view class="title-section">
        <text class="title">{{ material.title }}</text>
        <text class="type-badge">{{ material.type }}</text>
      </view>
      <view class="meta-info">
        <text class="upload-date">Uploaded: {{ material.uploadDate }}</text>
        <text class="author">By: {{ material.author }}</text>
      </view>
    </view>

    <!-- Material Content -->
    <scroll-view scroll-y class="content-section">
      <!-- Description -->
      <view class="section">
        <text class="section-title">Description</text>
        <text class="description">{{ material.description }}</text>
      </view>

      <!-- Content -->
      <view class="section">
        <text class="section-title">Content</text>
        <rich-text :nodes="material.content"></rich-text>
      </view>

      <!-- Attachments -->
      <view class="section" v-if="material.attachments.length">
        <text class="section-title">Attachments</text>
        <view 
          v-for="(attachment, index) in material.attachments" 
          :key="index"
          class="attachment-item"
          @click="downloadAttachment(attachment)"
        >
          <u-icon :name="getFileIcon(attachment.type)" size="40" color="#4b7bec"></u-icon>
          <view class="attachment-info">
            <text class="attachment-name">{{ attachment.name }}</text>
            <text class="attachment-size">{{ attachment.size }}</text>
          </view>
          <u-icon name="download" color="#4b7bec" size="32"></u-icon>
        </view>
      </view>
    </scroll-view>

    <!-- Action Buttons -->
    <view class="action-buttons">
      <u-button 
        type="primary" 
        :plain="true"
        @click="handleBookmark"
      >
        <u-icon :name="isBookmarked ? 'star-fill' : 'star'" color="#4b7bec"></u-icon>
        {{ isBookmarked ? 'Bookmarked' : 'Bookmark' }}
      </u-button>
      <u-button 
        type="primary"
        @click="handleShare"
      >
        <u-icon name="share" color="#ffffff"></u-icon>
        Share
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      materialId: null,
      isBookmarked: false,
      material: {
        title: 'Introduction to Anatomy',
        type: 'Lecture',
        uploadDate: '2024-03-20',
        author: 'Dr. Smith',
        description: 'Comprehensive overview of human anatomy basics covering skeletal system, muscular system, and organ systems.',
        content: '<div>Detailed content goes here...</div>',
        attachments: [
          {
            name: 'Lecture Slides.pdf',
            type: 'pdf',
            size: '2.5 MB'
          },
          {
            name: 'Practice Questions.docx',
            type: 'doc',
            size: '500 KB'
          }
        ]
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.materialId = options.id
      // TODO: Fetch material data using the ID
    }
  },
  methods: {
    getFileIcon(type) {
      const icons = {
        pdf: 'file-text',
        doc: 'file-word',
        default: 'file'
      }
      return icons[type] || icons.default
    },
    downloadAttachment(attachment) {
      // TODO: Implement download functionality
      uni.showToast({
        title: `Downloading ${attachment.name}`,
        icon: 'none'
      })
    },
    handleBookmark() {
      this.isBookmarked = !this.isBookmarked
      uni.showToast({
        title: this.isBookmarked ? 'Added to bookmarks' : 'Removed from bookmarks',
        icon: 'none'
      })
    },
    handleShare() {
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 0,
        title: this.material.title,
        summary: this.material.description,
        success: function (res) {
          console.log('success:' + JSON.stringify(res))
        },
        fail: function (err) {
          console.log('fail:' + JSON.stringify(err))
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
}

.material-header {
  background-color: #ffffff;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .title-section {
    display: flex;
    align-items: center;
    gap: 20rpx;
    margin-bottom: 20rpx;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      flex: 1;
    }
    
    .type-badge {
      background-color: rgba(75, 123, 236, 0.1);
      color: #4b7bec;
      padding: 4rpx 20rpx;
      border-radius: 20rpx;
      font-size: 24rpx;
    }
  }
  
  .meta-info {
    display: flex;
    gap: 30rpx;
    
    text {
      color: #666;
      font-size: 26rpx;
    }
  }
}

.content-section {
  flex: 1;
  padding-top: 30rpx;
  
  .section {
    background-color: #ffffff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .description {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  
  .attachment-info {
    flex: 1;
    
    .attachment-name {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 4rpx;
    }
    
    .attachment-size {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.action-buttons {
  padding: 30rpx;
  display: flex;
  gap: 20rpx;
  background-color: #ffffff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  :deep(.u-button) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rpx;
  }
}
</style> 